<template>
	<view class="page">
		<u-swiper indicator :list="list2" height='320' imgMode='' @change="change"></u-swiper>
		<view style="background-color: #fff;padding-bottom: 30rpx;">
			<view class="goods-title">
				全国九价现货|全国北京上海广州深圳青岛武汉南京9价HPV疫苗3针套餐预约代订 (扩龄9-45岁火热预售中抢先排队)
			</view>
			<view class="price">
				￥13888
			</view>
			<view class="goods-tips">
				[新春特惠]全国九价扩龄火热抢购中，9-45岁城市现货可约!
			</view>
		</view>
		<view class="goods-zhibao">
			<image style="width: 34rpx;height: 34rpx;" src="../../static/renzheng.png" mode="">
			</image>
			<text style="font-weight: bold;margin-left: 20rpx;color: #2c2c2c;">保障</text>
			<text style="margin-left: 20rpx;">官方保证&nbsp;真苗保证&nbsp;支持退款</text>
		</view>
		<view class="select-goods" @click="select">
			<image style="width: 34rpx;height: 34rpx;" src="../../static/qita.png" mode="">
			</image>
			<text class="province">{{selectProvince?'已选: '+ selectProvince:'请选择省份'}}</text>
			<u-icon name="arrow-right" color="#2c2c2c" size="16"></u-icon>
		</view>
		<view class="flow">
			<text class="flow-title">预约流程</text>
			<image src="../../static/flow.png" style="width: 100%;height: 145rpx;" mode=""></image>
		</view>
		<view class="goods-info">
			<view class="goods-info-t">
				<view class="goods-info-t-l"></view>
				<text style="font-size: 26rpx;font-weight: bold;">商品详情</text>
				<view class="goods-info-t-l"></view>
			</view>
			<img height='auto' style="width: 100%;" src="../../static/13ee4859ba69dafae8e1b17ac552c21.jpg"></img>
		</view>
		<u-popup safeAreaInsetBottom :show="show" @close="close" closeable :closeOnClickOverlay='false'>
			<view class="province-mask">
				<view class="">使用省份：</view>
				<view class="province-box">
					<view :class="selectIndex == index?'active':''" class="province-box-i" v-for="(item,index) in provinceData" :key="index" @click="selectItem(item,index)">{{item}}</view>
					<view class="province-box-i" style="height: 0;padding:0;"></view>
					<view class="province-box-i" style="height: 0;padding:0;"></view>
					<view class="province-box-i" style="height: 0;padding:0;"></view>
					<view class="province-box-i" style="height: 0;padding:0;"></view>
					<view class="province-box-i" style="height: 0;padding:0;"></view>
				</view>
				<view class="end-btn">
					<view class="end-btn-c" @click="end">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		<view class="end-btn yuyue">
			<view class="end-btn-c" style="width: 500rpx;" @click="select">
				立即预约
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list2: [
					'../../static/e09e3746fc54e3e7b24d8421280a7eb.jpg',
					'../../static/395efcdd5010f8b79e6dba69b0e085b.jpg',
					'../../static/dbd22cb95df4d948bc2292eff89cabb.jpg',
					'../../static/c1525a12be1a596af06008b51a7fd08.jpg',
					'../../static/86084e3731ee43b86a4af0e965ce3b5.jpg',
					'../../static/0d4af635398951a36ef6cadbd8289d2.jpg'
				],
				show: false,
				selectIndex:'',
				selectProvince:'',
				selectTemp:'',
				provinceData: [
					'北京市',
					'上海市',
					'天津市',
					'重庆市',
					'黑龙江',
					'吉林',
					'辽宁',
					'内蒙古',
					'河北',
					'新疆',
					'甘肃',
					'青海',
					'陕西',
					'宁夏',
					'河南',
					'山东',
					'山西',
					'安徽',
					'湖北',
					'湖南',
					'江苏',
					'浙江',
					'江西',
					'广东',
					'福建',
					'海南',
					'四川',
					'贵州',
					'云南',
					'广西',
					'西藏',
					
				]
			}
		},
		methods: {
			change() {

			},
			// 关闭
			close() {
			this.show = false
			},
			//点击选择省份
			select() {
				this.show = true
			},
			//选择省份项
			selectItem(item,index) {
				this.selectIndex = index
				this.selectTemp = item
			},
			// 选择省份点击确定
			end(){
				if(!this.selectTemp) {
					this.$refs.uToast.show({message:'选择省份'})
					return
				}
				this.show = false
				this.selectProvince = this.selectTemp
				uni.navigateTo({
					url:'/pages/comOrder/comOrder'
				})
			}
		}
	}
</script>

<style scoped>
	.page {
		background-color: #F4F4F4;
	}

	.goods-title {
		box-sizing: border-box;
		width: 100%;
		font-size: 34rpx;
		padding: 30rpx;
		font-weight: bold;
	}

	.goods-tips {
		width: 90%;
		background-color: #FFFAE1;
		border-radius: 10rpx;
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 25rpx;
		color: #EF9448;
		font-size: 30rpx;
		line-height: 40rpx;
		margin: 0 auto;
		text-indent: 30rpx;
	}

	.goods-zhibao {
		background-color: #fff;
		margin-top: 26rpx;
		width: 100%;
		height: 90rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
	}

	.select-goods {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
	}

	.province {
		font-size: 24rpx;
		flex: 1;
		margin-left: 20rpx;
	}

	.price {
		padding: 20rpx 30rpx;
		font-size: 34rpx;
		color: red;
		font-weight: bold;
	}

	.flow {
		width: 100%;
		background-color: #fff;
		margin-top: 20rpx;
		padding-top: 30rpx;
	}

	.flow-title {
		font-size: 34arpx;
		font-weight: bold;
		margin-left: 30rpx;
		margin-top: 30rpx;
	}

	.goods-info {
		width: 100%;
		box-sizing: border-box;
		margin-top: 30rpx;
		background-color: #fff;
		padding: 30rpx 20rpx;
		padding-bottom: 150rpx;

	}

	.goods-info-t {
		width: 320rpx;
		height: 80rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.goods-info-t-l {
		width: 90rpx;
		height: 2rpx;
		background-color: #ccc;
	}

	.province-mask {
		position: relative;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.province-box {
		margin-top: 40rpx;
		display: flex;
		flex-wrap: wrap;
		height: 600rpx;
		overflow-y: auto;
		justify-content: space-between;
		padding-bottom: 180rpx;
	}

	.province-box-i {
		padding: 20rpx 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
		background-color: #F4F4F4;
		border-radius: 26rpx;
		font-size: 30rpx;
		margin-right: 20rpx;
	}
	
	.active {
		color: #6B83FF;
	}
	
	.end-btn{
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 20rpx;
		height: 90rpx;
		box-sizing: border-box;
	}
	
	.end-btn-c {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 36rpx;
		border-radius: 40rpx;
		width: 400rpx;
		height: 90rpx;
		background-color:#6B83FF ;
		margin: 0 auto;
		
	}
	
	.yuyue {
		display: flex;
		align-items: center;
		height: 120rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
	}
</style>
